<!-- 我的拼购 -->
<template>
  <view class="page_box">
    <!-- tab -->
    <view class="head_box">
      <view class="order-nav u-flex">
        <view class="nav-item u-flex-col u-flex-1 u-row-center u-col-center" v-for="nav in groupState" :key="nav.id"
          @tap="onNav(nav.id)">
          <view class="item-title">{{ nav.title }}</view>
          <text class="nav-line" :class="{ 'line-active': stateId === nav.id }"></text>
        </view>
      </view>
    </view>

    <view class="content_box">
      <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" refresher-background="#f5f5f5"
        class="scroll-box">
        <block v-for="groupon in myGrouponList" :key="groupon.id">
          <view class="group-card">
            <!-- <image v-if="stateId !== '2'" class="group-state" :src="groupon.goods.image" mode=""></image> -->
            <view class="goods-content">
              <view class="u-flex u-m-b-20">
                <view class="sell-box">
                  {{groupon.title}}
                </view>
              </view>
              <view class="u-flex u-m-b-20">
                <view class="sell-box">
                  <text class="cuIcon-hotfill"></text>
                  <text class="sell-num">{{groupon.is_win}}</text>
                </view>
                <!-- <text class="group-num">10人团</text> -->
              </view>
              <!-- <shopro-mini-card
								:title="groupon.title"
								:image="groupon.image"
								:price="groupon.price"
                :describe="groupon.content"
								:originPrice="groupon.old_score"
							>
								<template #describe>
									<view class="u-flex u-m-b-20">
										<view class="sell-box">
											<text class="cuIcon-hotfill"></text>
											<text class="sell-num" v-if="groupon.is_win == 1">已拼中</text>
											<text class="sell-null-num" v-else-if="groupon.is_win == 0">未拼中</text>
											<text class="sell-num" v-else>拼购中</text>
										</view>
										<text class="group-num">10人团</text>
									</view>
								</template>
							</shopro-mini-card> -->
            </view>
            <view class="btn-box">
              {{groupon.create_time}}
              <!-- <button class="u-reset-button invite-btn"
                @tap="jump('/pages/activity/groupon/detail', { id: groupon.id })">拼购详情</button> -->
            </view>
          </view>
        </block>

        <!-- 空白页 -->
        <shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'" tipText="暂无拼购商品，更多拼购好货等着你噢~"
          btnText="去首页逛逛" @click="$Router.pushTab('/pages/index/index')"></shopro-empty>

        <!-- 加载更多 -->
        <u-loadmore height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
      </scroll-view>
    </view>
    <!-- 登录提示 -->
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        isEmpty: false,
        loadStatus: 'loadmore', //loadmore:加载前的状态，loading:加载中的状态，nomore-没有更多的状态
        lastPage: 1,
        currentPage: 1,
        stateId: '99',
        grouponStatus: {
          finish: this.$IMG_URL + '/imgs/group/group_state_succeed.png',
          'finish-fictitious': this.$IMG_URL + '/imgs/group/group_state_succeed.png',
          invalid: this.$IMG_URL + '/imgs/group/group_state_failed.png'
        },
        myGrouponList: [], //我的拼购列表。
        groupState: [{
            id: '99',
            title: '全部'
          },
          {
            id: '1', //2
            title: '拼中'
          },
          {
            id: '0', //3
            title: '未拼中'
          }
        ]
      };
    },
    computed: {},
    onLoad() {
      this.getMyGroupon();
    },
    onPullDownRefresh() {
      this.lastPage = 1;
      this.currentPage = 1;
      this.myGrouponList = [];
      this.getMyGroupon();
    },
    methods: {
      onNav(id) {
        if (this.stateId !== id) {
          this.stateId = id;
          this.myGrouponList = [];
          this.currentPage = 1;
          this.getMyGroupon();
        }
      },

      jump(path, parmas) {
        this.$Router.push({
          path: path,
          query: parmas
        });
      },

      // 加载更多
      loadMore() {
        if (this.currentPage < this.lastPage) {
          this.currentPage += 1;
          this.getMyGroupon();
        }
      },

      // 我的拼购
      getMyGroupon() {
        let that = this;
        that.loadStatus = 'loading';
        that.$http('goods.myGroupon', {
          is_win: that.stateId,
          page: that.currentPage
        }, '加载中').then(res => {
          uni.stopPullDownRefresh();
          if (res.code === 1) {
            if (res.data !== []) {
              that.myGrouponList = [...that.myGrouponList, ...res.data];
              that.isEmpty = false;
              that.lastPage = res.data.last_page;
              that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
            } else {
              that.loadStatus = 'nomore';
              that.isEmpty = true;
            }
          }
        });
      }
    }
  };
</script>

<style lang="scss">
  // tab
  .order-nav {
    background: #fff;
    height: 80rpx;

    .nav-item {
      flex: 1;

      .item-title {
        font-size: 30rpx;

        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 76rpx;
      }

      .nav-line {
        width: 120rpx;
        height: 4rpx;
        background: #fff;
      }

      .line-active {
        background: rgba(230, 184, 115, 1);
      }
    }
  }

  // 拼购卡片
  .group-card {
    background: #fff;
    margin-top: 20rpx;
    position: relative;
    overflow: hidden;

    .group-state {
      position: absolute;
      z-index: 2;
      top: -20rpx;
      right: -20rpx;
      width: 126rpx;
      height: 126rpx;
    }

    .goods-content {
      padding: 20rpx;
      position: relative;

      .group-num {
        font-size: 24rpx;

        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-left: 30rpx;
      }

      .sell-box {
        line-height: 32rpx;
        background: rgba(255, 224, 226, 0.3);
        border-radius: 16rpx;
        padding: 0 10rpx;

        .cuIcon-hotfill {
          color: #e1212b;
          font-size: 26rpx;
          margin-right: 10rpx;
        }

        .sell-num {
          font-size: 20rpx;
          color: #f7979c;
        }

        .sell-null-num {
          font-size: 20rpx;
          color: #ccc;
        }
      }
    }

    .btn-box {
      width: 100%;
      border-top: 1px solid rgba(223, 223, 223, 0.5);
      text-align: right;
      padding-right: 100rpx;
      color: #999999;
    }
  }
</style>
